<template>
	<view class="content">

		<!-- 头部 -->
		<view class="title" :class="isTitle ? 'up' : 'down'" :style="{ 'background-image': `url(${titImg})` }">
			<view class="title-icon">
				<u-icon @click="goBack" size="32" color="#FFFFFF" name="arrow-left"></u-icon>
			</view>

		</view>
		<view class="bgtitle" :class="isTitle ? 'bgtitle-up' : 'bgtitle-down'">
			<view class="bgtitle-text">
				<view class="">
					<u-icon size="32" color="#000" name="arrow-left"></u-icon>
				</view>

				<view class="">
					{{doctorDetails.name}}
				</view>
				<view class="">

				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" closeable='true' border-radius="24" height="500rpx">
			<view class="pop-tit pop-bor">
				医生简介
			</view>
			<scroll-view class="popup-box popup-boxTwo" scroll-y="true" style="">

				<view class="bot">
					<view class="popup-title">个人简介</view>
					<view class="pop-text">
						<rich-text :nodes="doctorDetails.intro"></rich-text>

					</view>

				</view>
				<view class="bot">
					<view class="popup-title"><text></text>擅长方向</view>
					<view class="pop-text">
						<rich-text :nodes="doctorDetails.great"></rich-text>
					</view>
				</view>
			</scroll-view>
		</u-popup>


		<u-popup v-model="showMores" mode="bottom" closeable='true' border-radius="24" height="552rpx">
			<view class="pop-tit">
				认证信息
			</view>
			<scroll-view class="popup-box " scroll-y="true" style="">

				<!-- <view class="realname-tit">
					<view class="real">
						<view class="">
							医生执业资质
						</view>
						<view class="">
							执业证书编号：1103*************955
						</view>
					</view>
					<view class="real-img">
						<image src="../../static/assets/cons_a.png" mode=""></image>
						<text>审核通过</text>
					</view>
				</view> -->
				<view class="realname-tit">
					<view class="real">
						<view class="">
							医生职称信息
						</view>

					</view>
					<view class="real-img">
						<image :src="pass" mode=""></image>
						<text>审核通过</text>
					</view>
				</view>
				<view class="realname-tit">
					<view class="real">
						<view class="">
							实名认证
						</view>
						<view class="">
							认证通过，所有服务均由医生本人提供
						</view>
					</view>
					<view class="real-img">
						<image :src="pass" mode=""></image>
						<text>审核通过</text>
					</view>
				</view>
			</scroll-view>
		</u-popup>


		<!-- <button open-type="share">分享</button> -->
		<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scroll="scroll"
			@scrolltolower="lower">
			<view class="doctor">
				<view class="doctor-title">
					<view class="title-top">
						<view class="title-box">
							<view class="top-img top">
								<image :src="doctorDetails.photoUrl" mode=""></image>
							</view>
							<view class="top-img top-height">
							</view>
							<view class="top-text">
								<view class="text-info">
									<text class="name">{{doctorDetails.name}}</text>
									<text class="level">{{dictLabel}}</text>
									<text class="su">|</text>
									<text class="office">{{doctorDetails.title}}</text>
								</view>
								<view class="real-name" @click="openshowMore">
									<image :src="authentication" mode=""></image>
									<view style="color: #805d33;">实名认证</view>
									<image :src="rightImg" mode=""></image>
								</view>

							</view>
						</view>
						<view class="share">
							<view class="share-box">
								<image :src="shareImg" mode=""></image>
								分享
							</view>
							<button open-type="share">分享</button>
						</view>
					</view>

					<view class="containers">
						<view :class="['text', { 'expanded': showMore===3 }]">
							<view class="">
								<image :src="textImg" mode=""></image>
							</view>
							<view class="good-text">
								<rich-text :nodes="doctorDetails.great"></rich-text>
							</view>
						</view>
						<view @click="openshow" class="toggle-btn">{{ show ? '收起' : '更多' }}
							<view class="title-img">
								<uni-icons type="arrowleft" size="16" color="#902E22"></uni-icons>
							</view>
						</view>
					</view>
					<view class="list">
						<view class="list-left">
							<view class="lt-top">
								<view class="">
									<image :src="star" mode=""></image>
									5.0
								</view>
								<text>推荐</text>
							</view>
							<view class="lt-text">
								患友推荐
							</view>
						</view>
						<view class="list-right">
							<view class="right-box">
								<view class="">
									{{doctorDetails.virtuals?doctorDetails.virtuals:0}}
								</view>
								<view class="">
									接诊人次
								</view>
							</view>
							<view class="right-box">
								<view class="">
									100%
								</view>
								<view class="">
									满意度
								</view>
							</view>
							<view class="right-box">
								<view class="">
									正常
								</view>
								<view class="">
									接诊速度
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="separation">

			</view>
			<view class="appointment">
				<view class="appointment-title">
					<view class="" v-for="(item,index) in appointment" :key="index" @click="appText(item,index)">
						<text :class="{'app-text':isindex==index}">{{item}}</text>
						<!-- <image src="" mode=""></image> -->
					</view>
				</view>
				<view class="appointment-item" v-if="isindex!=0">
					<view v-for="(item,index) in appointmentList" class="appointment-box" @click="appoint(item,index)"
						:class="{'appointment-border':isappoin==index}">
						<button class="swipers-btn" open-type="contact">在线咨询</button>
						<image :src="item.image" mode=""></image>
						<view class="box-tit">
							{{item.title}}
						</view>
						<view class="box-num">
							￥{{item.price}}/次
						</view>
						<view class="box-btn">
							点击预约
						</view>
					</view>
				</view>
				<view class="appointment-box appointment-border" v-else>
					<image :src="pay" mode=""></image>
					<view class="box-tit">
						预约挂号
					</view>
					<view class="box-num">

						{{doctorDetails.price>0?`￥${doctorDetails.price}/次`:'免费'}}
					</view>
					<view class="box-btn" @click="clickReserve">
						点击预约
					</view>
				</view>

			</view>
			<view class="science">
				<view class="science-tit">
					<view class="">
						健康科普({{scienceList.slice(0,5).length}}）
					</view>
					<view class="all" @click="all">
						<text>查看全部</text>
						<image class="right-img" :src="right" mode=""></image>

					</view>
				</view>
				<view class="science-item" v-for="(item,index) in scienceList.slice(0,5)" :key="index"
					@click="goScience(item)">
					<view class="item-tit">
						<view class="">
							{{item.title}}
						</view>
						<view class="item-text">
							<rich-text :nodes="item.content"></rich-text>
						</view>
					</view>
					<view class="item-img">
						<image :src="item.photoUrl" mode=""></image>
					</view>
				</view>
			</view>





		</scroll-view>

		<view class="btn-bg" >
			<view class="btn" @click="clickReserve" v-if="!isindex">

				{{btnText}}
			</view>
			<view class="btn" v-else>
				<view class="btn-box">
					<view class="" style="color: #fff;">
						{{btnText}}
					</view>
					<button class="btns" open-type="contact"></button>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import {
		setStore,
		getStore
	} from "../../utils";
	import config from "../../utils/config";
	import CreatePosterVue from "../../components/CreatePoster.vue";
	import {
		doctorDetails,
		getarticle,
		getPhone
	} from '../../service/api.js'
	export default {
		onShareAppMessage(res) {
			return {

				title: '', // 分享的标题
				path: `/integration/doctorDetails/index`, // 分享的页面路径
				imageUrl: '', // 分享的图片路径

			};
		},
		components: {
			CreatePosterVue
		},
		data() {
			return {
				right: config.ossHost + "2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png",
				show: false,
				id: "",
				btnText: '去挂号',
				isappoin: 0,
				openText: '擅长',
				appointment: ["预约挂号", '在线咨询'],
				isindex: 0,
				isTitle: true,
				showMores: false,
				btnBg: config.ossHost + "2025/01/07/bc4c90bd3a6e4a379e1081450cfad9c0.png",
				rightImg: config.ossHost + "2025/01/10/ff96ac2577a34f919595710fbeaf4fb0.png",
				pay: config.ossHost + '2024/12/29/686f24d8703f419f91ec8ff68bd40d0f.png',
				pass: config.ossHost + '2024/12/29/f7b4b9183bd345f19eb05ab4c81760d6.png',
				star: config.ossHost + '2024/12/29/ab7c9d0c1a504d06b65894bcef5252b5.png',
				authentication: config.ossHost + '2024/12/29/1f16bd18d76d4e93ad08e70bffa59d91.png',
				textImg: config.ossHost + '2024/12/29/6f3a6b7c794c4330b263e010cf06006b.png',
				//背景大图
				shareImg: config.ossHost + "2024/12/31/73d426715e074f129d2694e78802e7a3.png",
				bg: config.ossHost + '2024/12/29/526cd878dbcb473792128d350b195a58.png',

				titlebg: config.ossHost + '2024/12/29/4f2da7f431a34d01a26c1f3c07ab0861.png',
				registerbg: config.ossHost + '2024/12/29/c9a0ef938b8b45a3bf5e175aabf0de14.png',

				titImg: config.ossHost + '2024/12/31/2a99a9f81143400eb2011b90e191850e.png',


				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				doctorDetails: {},
				appointmentList: [{
						title: '图文咨询',
						price: 10,
						image: config.ossHost + "2025/01/07/f5dd1b3efd40410bbf9f679b24d4866c.png"


					},
					{
						title: '视频咨询',
						price: 50,
						image: config.ossHost + "2025/01/07/7c21e234bc0643a6980902bb1ec42afa.png"
					},
				],
				dictLabel: "",
				scienceList: []
			}
		},
		onShow() {
			this.getdoctorDetails();
		},
		onLoad(options) {

			if (options.item) {
				this.id = JSON.parse(options.item).id;
				this.dictLabel = JSON.parse(options.item).dictLabel;
				this.getdoctorDetails();
			}
			const pages = getCurrentPages(); // 获取当前页面栈
			const currentPage = pages[pages.length - 2].route; // 获取当前页面路径
			this.url = currentPage;
			this.article();
		},
		methods: {
			async article() {
				let res = await getarticle();
				if (res.code == 200) {

					this.scienceList = res.rows
				}


			},

			async getdoctorDetails() {
				let res = await doctorDetails(this.id);
				if (res.code == 200) {

					this.doctorDetails = res.data;

				}
			},
			//返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页
				});
			},
			//查看科普全部
			all() {
				uni.navigateTo({
					url: '/outpatient/allscience/index'
				})
			},
			goScience(item) {
			    // 获取本地存储的历史记录，如果没有则默认为空数组
			    let history = [];
			    const storedHistory = getStore('history');
			    
			    // 检查 storedHistory 是否有效，并且是一个有效的 JSON 字符串
			    if (storedHistory) {
			        try {
			            history = JSON.parse(storedHistory) || [];
			        } catch (error) {
			            console.error('解析历史记录失败:', error);
			            history = [];  // 如果解析失败，默认使用空数组
			        }
			    }
			
			    // 提取 item 中需要保存的字段
			    const { id, title, photoUrl } = item;
			
			    // 检查是否已有相同 id 的记录
			    const exists = history.some(record => record.id === id);
			
			    // 如果没有相同 id 的记录，才存储
			    if (!exists) {
			        history.push({ id, title, photoUrl });
			
			        // 存回本地存储，更新历史记录
			        setStore('history', JSON.stringify(history));
			    } else {
			        console.log('该项已经存在于历史记录中');
			    }
			
			    // 跳转到新的页面
			    uni.navigateTo({
			        url: `/integration/science/index?id=${id}`
			    });
			},
			//跳转预约界面
			clickReserve() {
				this.doctorDetails.dictLabel = this.dictLabel;
				let Details = this.doctorDetails
				Details.great = "";
				Details.intro = "";

				uni.navigateTo({
					url: `/integration/register/index?item=${JSON.stringify(Details)}`
				})
			},
			//在线预约切换
			appoint(item, index) {
				this.isappoin = index;
			},
			appText(item, index) {
				if (item == '预约挂号') {
					this.btnText = "去挂号"
				} else {
					this.btnText = "去咨询"
				}
				this.isindex = index;
			},
			//实名认证
			openshowMore(text) {
				this.showMores = !this.showMores;

			},
			openshow() {
				this.show = !this.show;
			},







			scroll(event) {
				// 获取当前设备的信息
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.windowWidth; // 获取屏幕宽度
				// 获取 scrollTop 的值
				const scrollTopPx = event.detail.scrollTop;
				// 将 scrollTop 从 px 转换为 rpx
				const scrollTopRpx = scrollTopPx * (750 / screenWidth);
				if (scrollTopRpx > 180) {
					this.isTitle = false
				} else {
					this.isTitle = true
				}

			},
			lower() {

			},
			upper() {

			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 100vw;
		height: auto;
		background-position: top left;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		color: #1A1A1A;
		padding-top: 170rpx;
		// padding-left: 24rpx;
		// padding-right: 24rpx;
		background-color: #fff;

		.title-icon {
			margin-top: 100rpx;
			margin-left: 24rpx;
		}

		.up {

			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			transform: translateY(0);
			/* 初始位置在正常位置 */
			opacity: 1;
			/* 完全不透明 */
		}

		.down {
			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			transform: translateY(-100%);
			/* 移动到下方 */
			opacity: 0;
			/* 透明度为 0 */
		}

		.bgtitle-up {
			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			transform: translateY(100%);
			/* 初始位置在正常位置 */
			opacity: 0;
			/* 完全不透明 */
		}

		.bgtitle-down {
			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			transform: translateY(0);
			/* 移动到下方 */
			opacity: 1;
			/* 透明度为 0 */
		}

		.bgtitle {
			position: fixed;
			top: 0;
			background: #fff;
			width: 100%;
			height: 250rpx;
			display: flex;
			align-items: center;

			.bgtitle-text {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin: 0 24rpx;

				view {
					width: 33.3%;

					font-size: 32rpx;
					font-weight: bold;
				}

				view:nth-child(2) {
					text-align: center;
				}

			}


			// transition: background 0.5s ease;

			/* 初始位置 */
			.title-text {
				padding-top: 76rpx;
				margin-bottom: 45rpx;
				text-align: center;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		//头部
		.title {
			position: fixed;
			top: 0;

			// transition: margin-left 0.5s ease;
			width: 100%;
			height: 220rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			/* 向上滑动 */
			.title-img {

				padding-top: 96rpx;

				image {
					width: 322rpx;
					height: 78rpx;
				}
			}


		}

		.btn-bg {
			position: fixed;
			bottom: 0rpx;
			width: 750rpx;
			height: 170rpx;
			background: #fff;
			box-shadow: 0 0 20rpx #f2f2f2;
		}

		.btn {

			margin: auto;
			margin-top: 20rpx;
			width: 702rpx;
			height: 82rpx;
			background: #CCA566;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			line-height: 82rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;

			.btn-box {
				position: relative;
				width: 100%;

				.btns {
					position: absolute;
					top: 0;
					left: 0;
					width: 702rpx;
					height: 82rpx;
					opacity: 0;
				}

			}
		}

		.scroll-Y {
			height: calc(100vh - 361rpx);
			width: 100%;

			padding-bottom: 24rpx;

			.doctor {
				padding-top: 30rpx;
			}

			.doctor-title {
				background: #fff;
				border-radius: 24rpx;

				.list {
					display: flex;
					// justify-content: space-around;
					margin: 0 24rpx;
					margin-top: 20rpx;
					border-top: 1rpx solid #E6E6E6;
					padding: 24rpx 0;

					.list-left {
						display: flex;
						width: 160rpx;
						flex-direction: column;
						align-items: center;
						border-right: 1rpx solid #E6E6E6;
						padding-right: 40rpx;
						margin-right: 20rpx;

						.lt-text {
							margin-top: 5rpx;
							font-size: 24rpx;
							color: #808080;
						}

						.lt-top {
							display: flex;
							justify-content: space-around;
							align-items: center;

							view {
								font-weight: bold;
								font-size: 32rpx;
								color: #FF7C54;
								display: flex;
								align-items: center;

								image {
									width: 38rpx;
									height: 38rpx;
									margin-right: 5rpx;
								}
							}

							text {
								font-size: 28rpx;
								color: #1A1A1A;
								font-weight: bold;
							}
						}
					}

					.list-right {
						width: calc(100vw - 220rpx);
						display: flex;
						justify-content: space-around;

						.right-box {
							display: flex;
							flex-direction: column;
							align-items: center;

							view:first-child {
								font-weight: bold;
							}

							view:last-child {
								margin-top: 5rpx;
								color: #808080;
								font-size: 24rpx;

							}
						}
					}
				}

				.containers {
					position: relative;
					font-size: 28rpx;
					margin-top: 20rpx;


					.text {
						margin: 0 24rpx;
						width: 702rpx;

						.good-text {
							display: -webkit-box;
							/* 使用 Flexbox 样式布局 */
							-webkit-line-clamp: 2;
							/* 限制文本显示为 2 行 */
							-webkit-box-orient: vertical;
							/* 垂直方向的盒子布局 */
							overflow: hidden;
							/* 超出内容隐藏 */
							text-overflow: ellipsis;
							color: #4D4D4D;
							line-height: 38rpx;
							text-indent: 4.2em;
						}

						image {
							position: absolute;
							width: 108rpx;
							height: 26rpx;
							top: 6rpx;
						}

					}



					.toggle-btn {
						position: absolute;
						bottom: -9rpx;
						right: 24rpx;
						cursor: pointer;
						margin-bottom: 10rpx;
						color: #CCA566;
						display: flex;
						/* align-items: center; */
						background: #fff;
						/* width: 100rpx; */
						/* text-align: right; */
						padding-left: 18rpx;


					}
				}

				.title-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
					width: 100%;

					.title-box {
						display: flex;
						align-items: center;
					}

					.top-img {
						width: 165rpx;
						height: 165rpx;
						border-radius: 50%;
						background: #fff;
						margin-left: 28rpx;
						margin-right: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 152rpx;
							height: 152rpx;
							border-radius: 50%;
						}
					}

					.share {
						position: relative;

						.share-box {
							width: 100rpx;
							height: 48rpx;
							background: #CCA566;
							border-radius: 36rpx 0rpx 0rpx 36rpx;
							display: flex;
							justify-content: space-around;
							align-items: center;
							font-size: 24rpx;
							color: #FFFFFF;

							image {
								margin-left: 10rpx;
								width: 28rpx;
								height: 28rpx;
							}
						}

						button {
							position: absolute;
							top: 0;
							right: 0;
							opacity: 0;
							width: 112rpx;
							height: 48rpx;
						}
					}

					.top-text {

						.real-name {
							width: 132rpx;
							height: 33rpx;
							line-height: 33rpx;
							display: flex;
							/* justify-content: space-around; */
							align-items: center;
							margin-top: 6rpx;
							background: #FBEEDA;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-size: 20rpx;
							padding: 0 3rpx;
							color: #805D33;

							view {
								margin: 0 4rpx;
							}

							image {
								width: 24rpx;
								height: 24rpx;
							}

							image:last-child {
								width: 20rpx;
								height: 22rpx;
								margin-top: 2rpx;
							}
						}

						.text-info {

							.name {
								font-weight: 600;
								font-size: 40rpx;
								margin-right: 16rpx;
							}

							.level {
								font-weight: 400;

							}

							.su {
								font-size: 24rpx;
								color: #E6E6E6;
								margin: 0rpx 5rpx;
							}

							.office {}
						}
					}

					.top-height {
						height: 140rpx;
					}

					.top {
						position: absolute;
						top: -25rpx;
					}
				}


			}

			.science {
				margin-top: 16rpx;

				padding: 24rpx;

				.science-tit {
					display: flex;
					justify-content: space-between;

					view {
						font-weight: bold;
						font-size: 32rpx;
					}

					.all {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #808080;
					}
				}

				.science-item {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					.item-tit {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 118rpx;

						view:first-child {
							width: 520rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							/* 设置最大显示行数为2行 */
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 500;
							line-height: 36rpx;
							font-weight: bold;
						}


					}

					.item-text {
						width: 520rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						/* 设置最大显示行数为2行 */
						overflow: hidden;
						font-size: 24rpx;
						text-overflow: ellipsis;
						color: #808080;
					}

					.item-img {
						width: 160rpx;
						height: 118rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;

						image {
							width: 160rpx;
							height: 118rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
						}
					}

				}
			}

			.separation {
				width: 100%;
				height: 24rpx;
				background: #F5F3F0;
			}

			.appointment {

				padding: 24rpx;
				background: #fff;

				.appointment-title {
					display: flex;
					align-items: center;
					color: #808080;
					font-size: 28rpx;

					view {
						color: #808080;
						margin-right: 48rpx;
					}

					.app-text {
						font-weight: bold;
						font-size: 32rpx;
						color: #1A1A1A;
						padding-bottom: 5rpx;
						border-bottom: 4rpx solid #CCA566;
					}
				}

				.appointment-box {
					position: relative;
					margin-top: 24rpx;
					padding: 24rpx 0;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					background: rgba(245, 243, 240, 0.5);
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 224rpx;

					button {
						position: absolute;
						z-index: 10;
						top: 0;
						left: 0;
						right: 0;
						width: 224rpx;
						height: 300rpx;
						opacity: 0;
					}

					image {
						width: 63rpx;
						height: 63rpx;
					}

					view {
						margin-top: 8rpx;
					}

					.box-tit {
						font-weight: bold;
						color: #1A1A1A;
					}

					.box-num {

						color: #FF7C54;
					}

					.box-btn {
						margin-top: 12rpx;
						width: 144rpx;
						text-align: center;
						line-height: 42rpx;
						height: 42rpx;
						font-size: 20rpx;
						color: #805D33;
						border-radius: 6rpx;
						border: 1rpx solid #805D33;
					}

				}

				.appointment-border {
					background: #FFFFFF;
					border: 1rpx solid #805D33;
				}

			}

		}

	}

	.pop-tit {
		text-align: center;
		padding: 40rpx 0;
		font-size: 32rpx;
		color: #1A1A1A;
		border-bottom: 1rpx solid #E6E6E6;

	}

	.pop-bor {
		border-bottom: none;
	}

	.popup-box {
		height: calc(552rpx - 130rpx);

		.bot {}

		.realname-tit {
			display: flex;
			justify-content: space-between;
			margin: 0 24rpx;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			.real {

				view:first-child {
					color: #805D33;
					font-weight: bold;

				}

				view:nth-child(2) {
					color: #805D33;
					margin-top: 5rpx;
					font-size: 24rpx;

				}
			}

			.real-img {
				display: flex;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					font-size: 24rpx;
					color: #805D33;
				}
			}
		}

		.realname-tit:last-child {
			border: none;
		}
	}

	.popup-boxTwo {
		height: calc(500rpx - 130rpx);

		.bot {
			margin: 24rpx;

			.popup-title {
				font-weight: bold;
			}

			.pop-text {
				font-size: 22rpx;
				color: #808080;
				line-height: 26rpx;
			}
		}
	}

	.appointment-item {
		display: grid;
		/* 使用 Grid 布局 */
		grid-template-columns: repeat(3, 1fr);
		/* 创建三个等宽的列 */
		gap: 10px;
		/* 子元素之间的间距 */

	}
</style>